<template>
  <div>
    <Card dis-hover>
      <div slot="title" style="font-size:20px;">
        待办事项
      </div>
      您有 <strong><Button type="text" @click="handleBacklog" style="font-size:20px;color:#ed4014;">{{backlogCount}}</Button></strong> 条流程需要处理。
    </Card>
    <br>
    <Card dis-hover>
      <span style="font-size:40px;">QQ群：630281431</span>
    </Card>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import InfoCard from '@/components/chart/info-card.vue';
import CountTo from '@/components/chart/count-to.vue';
import ChartPie from '@/components/chart/pie/pie.vue';
import ChartBar from '@/components/chart/bar/bar.vue';
import Util from '@/lib/util';

@Component({
  components: {ChartBar, ChartPie, CountTo, InfoCard},
})
export default class Home extends Vue {
  name: string = 'Home';


  get backlogCount(){
    return this.$store.state.flowInstance.backlogCount;
  }

  handleBacklog(){
    location.href = '/?#/flow-instance/backlog';
  }

  async created() {

    await this.$store.dispatch({
      type:'flowInstance/getBacklogCount',
      data:{},
    });
  }


}
</script>

<style lang="less">
.count-style {
  font-size: 50px;
}
</style>
